{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/home/css/login.css?v={$version}">
{/block}
{block name="main"}
    <!-- 中间内容区域 -->
    <div class="content-area login-image-bg">
        <div class="login-box">
            <div class="title-line inline-box">
                <div class="middle-line inline-block"></div>
                <div class="words inline-block">欢迎登陆<span>声谷网</span></div>
                <div class="middle-line inline-block"></div>
            </div>
            <form id="form">
                <div class="com-input inline-box">
                    <div class="icon phone inline-block"></div>
                    <input  id="phone" name="mobile" class="inline-block" value="" placeholder="请输入手机号码" />
                </div>

                <div class="inline-box">
                    <div class="code-input inline-block inline-box">
                        <div class="icon safe inline-block"></div>
                        <input  name="code" class="inline-block" value="" placeholder="请输入验证码" />
                    </div>

                    <div class="send-btn inline-block code-btn" style="cursor: pointer">获取验证码</div>
                </div>

                <div class="login-line tips inline-box">
                    <div id="check" onclick="check(this)" class="tick-icon  inline-block"></div>
                    <div class="words inline-block">
                        我已阅读并同意<a href="{:url('article/index',array('id'=>1))}">用户协议</a>和<a href="{:url('article/index',array('id'=>2))}">隐私政策</a>
                    </div>
                </div>

                <button id="submit" type="button" class="submit-btn" >登陆</button>
            </form>
        </div>
    </div>
    <!-- 中间内容区域 END -->
{/block}
{block name="script"}
    <script>
        $('#submit').on('click',function(){
            if($('#check').hasClass('un-tick-icon')){
                alert('请同意用户协议与隐私政策');
                return false;
            }
            var obj = $("#form").serializeArray();
            var url = "{:url('home/login/login')}";
            $.post(url,obj,function(data){
                if(data.code != 1){
                    alert(data.msg);
                }else{
                    window.location.href = '{:url("home/index/index")}';
                }
            });
        });
        function check(obj){
            if($(obj).hasClass('un-tick-icon')){
                $(obj).removeClass('un-tick-icon');
            }else{
                $(obj).addClass('un-tick-icon');
            }
        }
        var timer = null;
        $('.code-btn').click(function () {
            if($(this).hasClass('disabled')) {
                return false;
            }
            else {
                var _this = this;
                var d = new Object();
                d.mobile = $('#phone').val();
                $.post("{:url('util/sms')}",d,function(data){
                    if(data.code == 1){
                        alert('短信发送成功');
                        var count = 60;
                        $(_this).text(count).addClass('disabled');
                        timer = setInterval(function() {
                            if(count <= 1) {
                                count = 60;
                                $(_this).text('获取验证码').removeClass('disabled');
                                clearInterval(timer);
                                timer = null;
                            }else{
                                count --;
                                $(_this).text(count);
                            }
                        }.bind(_this),1000);
                    }else{
                        alert(data.msg);
                    }
                });
            }
        });
    </script>
{/block}